<template>
	<el-card shadow="hover" v-loading="isLoading">
		<!--			<el-form :model="form" ref="form" :rules="rules"  :disabled="this.action == 'view'">-->
		<h2>问诊单信息</h2>
		<el-divider/>
		<el-main>
			<el-row justify="start">
				<el-col :span="5">
					<el-form-item label="用户信息">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="姓名：" prop="username">
						<el-text class="mx-1" :text="form.username" clearable>{{ form.username }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="年龄：" prop="patient_age">
						<el-text class="mx-1" :text="form.patient_age" clearable>{{ form.patient_age }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="性别：" prop="patient_sex_name">
						<el-text class="mx-1" :text="form.patient_sex_name" clearable>{{ form.patient_sex_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="证件类型：" prop="patient_id_card_type_name">
						<el-text class="mx-1" :text="form.patient_id_card_type_name" clearable>{{ form.patient_id_card_type_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="证件号：" prop="patient_id_card">
						<el-text class="mx-1" :text="form.patient_id_card" clearable>{{ form.patient_id_card }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="手机号码：" prop="user_mobile">
						<el-text class="mx-1" :text="form.user_mobile" clearable>{{ form.user_mobile }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="服务名称：" prop="product_name">
						<el-text class="mx-1" :text="form.product_name" clearable>{{ form.product_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="服务次数：" prop="service_times">
						<el-text class="mx-1" :text="form.service_times" clearable>{{ form.service_times }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="已使用次数：" prop="use_times">
						<el-text class="mx-1" :text="form.use_times" clearable>{{ form.use_times }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="未使用次数：" prop="remain_service_times">
						<el-text class="mx-1" :text="form.remain_service_times" clearable>{{ form.remain_service_times }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="医保卡号：" prop="medical_card">
						<el-text class="mx-1" :text="form.medical_card" clearable>{{ form.medical_card }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="权益生效时间：" prop="service_open_at">
						<el-text class="mx-1" :text="form.service_open_at" clearable>{{ form.service_open_at }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider/>
			<el-row>
				<el-col :span="4">
					<el-form-item label="订单信息">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="就诊医院：" prop="appointment_hospital_name">
						<el-text class="mx-1" :text="form.appointment_hospital_name" clearable>{{ form.appointment_hospital_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="就诊科室：" prop="appointment_department_name">
						<el-text class="mx-1" :text="form.appointment_department_name" clearable>{{ form.appointment_department_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="订单状态：" prop="order_status_name">
						<el-text class="mx-1" :text="form.order_status_name" clearable>{{ form.order_status_name }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="就诊开始时间：" prop="appointment_begin_at">
						<el-text class="mx-1" :text="form.appointment_begin_at" clearable>{{ form.appointment_begin_at }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="就诊结束时间：" prop="appointment_end_at">
						<el-text class="mx-1" :text="form.appointment_end_at" clearable>{{ form.appointment_end_at }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="病情描述：" prop="illness_desc">
						<el-text class="mx-1" :text="form.illness_desc" clearable>{{ form.illness_desc }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
		</el-main>
	</el-card>
	<el-card shadow="hover">
		<el-row>
			<el-col :span="5">
				<h2>诊断图片</h2>
			</el-col>
			<el-col :span="5">
			</el-col>
		</el-row>
		<el-divider/>
		<el-main>
			<el-row>
				<template v-if="patient_pic_list.length > 0">
				<el-col :span="2" :offset="1" v-for="(item, index) in patient_pic_list" :key="index">
					<div class="demo-image__preview">
						<el-image
							style="width: 100px; height: 100px"
							:src="item"
							:zoom-rate="1.2"
							:max-scale="7"
							:min-scale="0.2"
							:preview-src-list="patient_pic_list"
							:initial-index="index"
							fit="cover"
						/>
					</div>
				</el-col>
				</template>
			</el-row>
		</el-main>
	</el-card>
	<!--			</el-form>-->
	<!--		</el-card>-->
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import saveDialog from './video.vue'

export default {
	name: 'carIndexDetail',
	components: {
		saveDialog,
	},
	data() {
		return {
			action: null,
			isLoading: false,
			//表单数据
			form: {},
			//弹窗
			dialog: {
				save: false
			},
			//问诊图片
			patient_pic_list:[],
		}
	},
	created() {

	},
	mounted() {
		this.patient_sn = this.$route.query.patient_sn;

		//修改tab名称
		this.action = this.$route.query.action;
		var title = '';
		if (this.action == 'view') {
			title = '问诊单详情';
		}
		this.$store.commit("updateViewTagsTitle", title)

		if (this.patient_sn) {
			this.loadForm()
		}
	},
	methods: {
		//表单数据加载
		loadForm() {
			this.isLoading = true;
			let params = {
				patient_sn: this.patient_sn,
			}
			this.$API['patient.jing_yi_yun'].detail.post(params).then((res) => {
				if (res.code == 0) {
					this.setData(res.data);
				}
			}).catch((msg) => {
				this.$alert(msg, "提示", {type: 'error'})
			})
			this.isLoading = false;
		},
		//表单注入数据
		setData(data) {
			if (data){
				this.form = data;
			}
			if(data.illness_pic_list && data.illness_pic_list.length > 0){
				this.patient_pic_list = data.illness_pic_list;
			}
		}
	}
}
</script>

<style>
.avatar {
	width: 148px;
	height: 148px;
	display: block;
}

.el-form-item--default .el-form-item__label {
	text-align: left;
}

.el-form-item--default .el-form-item__label {
	justify-content: start;
}

.el-card {
	margin: 10px;
}


.demo-image__error .image-slot {
	font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
	font-size: 30px;
}
.demo-image__error .el-image {
	width: 100%;
	height: 200px;
}
</style>
